<template>
	<div>
		<p class="title">
			推荐歌单
		</p>
		<van-row gutter="20" type="flex" justify="center">
			<van-col span="8" v-for="obj in recommandMusicList" :key="obj.id">
				<van-image width="100%" height="100" :src="obj.picUrl" />
				<p class="song_name">{{obj.name}}</p>
			</van-col>
		</van-row>
		
		<p class="title">最新歌曲推荐</p>
	
			<SongItem v-for="obj in newMusicList" :key="obj.id" :name="obj.name" :author="obj.song.artists[0].name+' '+obj.name" :id="obj.id"></SongItem>
	
		<!-- <van-cell :title="obj.name" :label="obj.song.artists[0].name+' '+obj.name" center v-for="obj in newMusicList" :key="obj.id" size="0.6rem">
		  <template #right-icon>
		    <van-icon name="play-circle-o" class="play-icon" />
		  </template>
		</van-cell>	 -->
	</div>
</template>

<script>
	import {recommandMusicAPI,newMusicAPI} from "@/api"
	import SongItem from "@/components/SongItem"
	export default {
		name: "Home",
		data(){
			return{
				recommandMusicList:[],
				newMusicList:[]
			}
		},
		async  mounted() {
			//获得推荐歌单
			const res1=await recommandMusicAPI({limit:6})
			this.recommandMusicList=res1.data.result
			
			//获取最新歌曲
			const res2=await newMusicAPI()
			this.newMusicList=res2.data.result
		},
		components:{
			SongItem
		}
	}
</script>

<style scoped>
	/* 标题 */
	.title {
		padding: 0.266667rem 0.24rem;
		margin: 0 0 0.24rem 0;
		background-color: #eee;
		color: #333;
		font-size: 15px;
	}

	/* 推荐歌单 - 歌名 */
	.song_name {
		font-size: 0.346667rem;
		padding: 0 0.08rem;
		margin-bottom: 0.266667rem;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 2;
		/** 显示的行数 **/
		overflow: hidden;
		/** 隐藏超出的内容 **/
	}
	.play-icon {
	    font-size: 16px;
	    line-height: inherit;
	  }
</style>
